<!--

If this file is present, it is shown automatically when a new steroids.views.WebView is pushed to the layer stack.
Once the new WebView has finished loading, the loading.html view will be hidden with a fast fade animation.
Currently, loading.html is supported by iOS only.

-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Loading...</title>

  <link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />

  <style>

  @-webkit-keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
    }
    to { 
      -webkit-transform: rotate(360deg);
    }
  }

  html,body {
    height:100%;
  }

  .centered {
    height:100%;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }

  img#spinner {
    width:36px;
    -webkit-animation-name:            rotate;
    -webkit-animation-duration:        1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }

  </style>

</head>

<body>
  <div class="centered">
    <h1>Loading...</h1>
    <img id="spinner" src="vendor/topcoat/img/spinner2x.png">
  </div>
</body>
</html>
